<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        canvas{
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <canvas></canvas>
</body>
    <script>
        var canvas = document.querySelector("canvas");
        var ctx = canvas.getContext("2d");
        canvas.width = 1000;
        canvas.height = 500;
        
        function rand(min,max){
            return Math.round(Math.random()*(max-min)+min);
        }
        function randC(){
            var r = rand(0,255);
            var g = rand(0,255);
            var b = rand(0,255);
            
            return "rgb("+r+","+g+","+b+")";
        }
        
        
        function ColorBall(x,y){
            this.x = x;
            this.y = y;
            this.color = randC();
            var s = 0.5 - Math.random();
            if(s > 0){
                s = 1;
            }else{
                s = -1;
            }
            this.speedX = rand(5,10)*s;
            this.speedY = 1;
        }
        function Ball(x,y){
            this.x = x;
            this.y = y;
            this.color = "cyan";
        }
        Ball.prototype.draw = function(){
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.arc(this.x,this.y,5,0,2*Math.PI,false);
            ctx.fill();
        }
        for(var x in Ball.prototype){
            ColorBall.prototype[x] = Ball.prototype[x];
        }
        
        
        
        function Num(x,y){
            this.x = x;
            this.y = y;
            this.num = 0;
            this.cloarr = [];
            this.iscan = true;
        }
        Num.prototype.draw = function(){
            var arr = [];
            switch(this.num) {
                case 0:
                    arr = [[2,3,4],[1,2,4,5],[0,1,5,6],[0,1,5,6],[0,1,5,6],[0,1,5,6],[0,1,5,6],[0,1,5,6],[1,2,4,5],[2,3,4]];
                    break;
                case 1:
                    arr = [[3,4],[1,2,3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[3,4],[0,1,2,3,4,5,6]];
                    break;
                case 2:
                    arr = [[1,2,3,4,5],[0,1,5,6],[5,6],[4,5],[3,4],[2,3],[1,2],[0,1],[0,1,5,6],[0,1,2,3,4,5,6]];
                    break;
                case 3:
                    arr = [[0,1,2,3,4,5,6],[5,6],[4,5],[3,4],[2,3,4],[4,5],[5,6],[5,6],[0,1,5,6],[1,2,3,4,5]];
                    break;
                case 4:
                    arr = [[4,5],[3,4,5],[2,3,4,5],[1,2,4,5],[0,1,4,5],[0,1,2,3,4,5,6],[4,5],[4,5],[4,5],[3,4,5,6]];
                    break;
                case 5:
                    arr = [[0,1,2,3,4,5,6],[0,1],[0,1],[0,1,2,3,4,5],[5,6],[5,6],[5,6],[5,6],[0,1,5,6],[1,2,3,4,5]];
                    break;
                case 6:
                    arr = [[3,4],[2,3],[1,2],[0,1],[0,1,3,4,5],[0,1,5,6],[0,1,5,6],[0,1,5,6],[0,1,5,6],[1,2,3,4,5]];
                    break;
                case 7:
                    arr = [[0,1,2,3,4,5,6],[0,1,5,6],[4,5],[4,5],[3,4],[3,4],[2,3],[2,3],[2,3],[2,3]];
                    break;
                case 8:
                    arr = [[1,2,3,4,5],[0,1,5,6],[0,1,5,6],[0,1,5,6],[1,2,3,4,5],[0,1,5,6],[0,1,5,6],[0,1,5,6],[0,1,5,6],[1,2,3,4,5]];
                    break;
                case 9:
                    arr = [[1,2,3,4,5],[0,1,5,6],[0,1,5,6],[0,1,5,6],[1,2,3,5,6],[5,6],[5,6],[4,5],[3,4],[2,3]];
                    break;
                default:
                    break;
            }
            for(var i=0;i<arr.length;i++){
                var array = arr[i];
                for(var j=0;j<array.length;j++){
                    var bx = this.x + array[j] * 10;
                    var by = this.y + i * 10;
                    
                    var ball = new Ball(bx,by);
                    ball.draw();
                }
            }
            
            if(!this.iscan){
                this.cloarr = arr;
            }else{
                this.iscan = false;
                createColor(this,this.cloarr);
            }
        }
        
        var cbs = [];
        
        function createColor(obj,arr){
            for(var i=0;i<arr.length;i++){
                var array = arr[i];
                for(var j=0;j<array.length;j++){
                    var qx = obj.x + array[j] * 10;
                    var qy = obj.y + i * 10;
                    var cball = new ColorBall(qx,qy);
                    cball.draw();
                    cbs.push(cball);
                }
            }
        }
        
        var hb = new Num(200,50);
        var hs = new Num(280,50);
        var mb = new Num(400,50);
        var ms = new Num(480,50);
        var sb = new Num(600,50);
        var ss = new Num(680,50);
        
        function time(){
            var data = new Date();
            var HB = parseInt(data.getHours()/10);
            var HS = data.getHours()%10;
            var MB = parseInt(data.getMinutes()/10);
            var MS = data.getMinutes()%10;
            var SB = parseInt(data.getSeconds()/10);
            var SS = data.getSeconds()%10;
            
            hb.iscan = hb.num == HB ? false : true;
            hs.iscan = hs.num == HS ? false : true;
            mb.iscan = mb.num == MB ? false : true;
            ms.iscan = ms.num == MS ? false : true;
            sb.iscan = sb.num == SB ? false : true;
            ss.iscan = ss.num == SS ? false : true;
            hb.num = HB;
            hs.num = HS;
            mb.num = MB;
            ms.num = MS;
            sb.num = SB;
            ss.num = SS;
            
            hb.draw();
            hs.draw();
            mb.draw();
            ms.draw();
            sb.draw();
            ss.draw();
        }
        
        setInterval(function(){
            ctx.clearRect(0,0,canvas.width,canvas.height);
            time();
            for(var k=0;k<cbs.length;k++){
                cbs[k].x+=cbs[k].speedX;
                cbs[k].speedY ++;
                cbs[k].speedY*=0.98;
                cbs[k].y+=cbs[k].speedY;
                if(cbs[k].y-5>500){
                    cbs[k].y=500-5;
                    cbs[k].speedY*=-1;
                }
                if(cbs[k].x-5>1000||cbs[k].x+5<0){
                    cbs.splice(k,1);
                    k--;
                    continue;
                }
                cbs[k].draw();
            }
            
        },30)
        
    </script>
</html>